<template>
  <div>我的页面</div>
  <div>{{ myStore1.count }}</div>
  <div>{{ myStore1.doubleCount }}</div>
  <button @click="myStore1.increment">按钮</button>
  <test-div :name="name"></test-div>
  <button @click="changeName">改变name</button>
  <div>-----复选框-----</div>
  <input type="checkbox" v-model="checkValue" id="checkbox" />
  <label for="checkbox">复选框{{ checkValue }}</label>
  <div>-----单选按钮{{ pick }}-----</div>
  <input type="radio" v-model="pick" value="first" id="first" />
  <label for="first">first</label>
  <input type="radio" v-model="pick" value="second" id="second" />
  <label for="second">second</label>
  <ChildCom
    ref="childcom"
    v-model="userInfo"
    id="1234"
    @click="ok"
    class="style-s"
  />
  <div>传给子组件的model{{ userInfo.name + "---" + userInfo.age }}</div>
  <test-comp></test-comp>
</template>
<script setup>
import { myStore } from "@/stores/text.js";
import { ref, onBeforeUpdate, onMounted } from "vue";
import ChildCom from "./components/ChildCom.vue";
import TestComp from "./components/TestComp.vue";

import TestDiv from "./components/ReturnCom.js";
const myStore1 = myStore();
/**
 * const { count } = myStore();
 * 在这里用结构赋值会失去响应式
 * 解决方案： import { storeToRefs } from 'pinia';
 * const { count } = storeToRefs(myStore());
 */
console.log("myStore1", myStore1);
let name = ref("wang");
function changeName() {
  name.value += "!";
  console.log("name", name.value);
}
let checkValue = ref(true);
let pick = ref("first");

onBeforeUpdate(() => {
  console.log("fuzujian---onBeforeUpdate");
});
const childcom = ref(null);
onMounted(() => {
  console.log("childcom", childcom.value.name);
});
const userInfo = ref({
  name: "wang",
  age: 15,
});
function ok() {
  return "123456789";
}
</script>
<style lang="scss">
.style-s {
  background-color: red;
}
</style>
